import { ReactNode } from "react";
import { StyleProp, ViewStyle, TextStyle, DimensionValue } from "react-native";

/**
 * 底部弹出选项项的属性接口
 */
export interface BottomSheetItemProps {
  /**
   * 选项图标，可以是React组件或者图标名称
   */
  icon?: ReactNode;

  /**
   * 选项图标颜色
   */
  iconColor?: string;

  /**
   * 选项文本
   */
  title: string;

  /**
   * 选项文本颜色，默认为主题文本颜色
   */
  titleColor?: string;

  /**
   * 是否为危险操作，显示为红色
   */
  danger?: boolean;

  /**
   * 点击选项时的回调函数
   */
  onPress?: () => void;

  /**
   * 自定义样式
   */
  style?: StyleProp<ViewStyle>;

  /**
   * 文本样式
   */
  titleStyle?: StyleProp<TextStyle>;

  /**
   * 是否禁用此选项
   */
  disabled?: boolean;

  /**
   * 自定义渲染内容，替代默认UI
   */
  customContent?: ReactNode;
}

/**
 * 底部弹出面板属性接口
 */
export interface BottomSheetProps {
  /**
   * 控制底部面板是否显示
   */
  visible: boolean;

  /**
   * 关闭面板的回调函数
   */
  onClose: () => void;

  /**
   * 面板标题
   */
  title?: string;

  /**
   * 面板子标题或描述文本
   */
  subtitle?: string;

  /**
   * 子元素，通常是BottomSheetItem组件
   */
  children?: ReactNode;

  /**
   * 自定义内容渲染函数或组件
   * 当提供此属性时，children将被忽略
   */
  content?: ReactNode;

  /**
   * 取消按钮的文本，默认为"取消"
   */
  cancelText?: string;

  /**
   * 点击取消按钮的回调函数，默认与onClose相同
   */
  onCancel?: () => void;

  /**
   * 点击背景遮罩是否关闭面板，默认为true
   */
  closeOnTouchOutside?: boolean;

  /**
   * 面板的高度，可以是固定值或者百分比，默认为整个屏幕高度
   */
  height?: DimensionValue;

  /**
   * 自定义容器样式
   */
  containerStyle?: StyleProp<ViewStyle>;

  /**
   * 自定义内容样式
   */
  contentStyle?: StyleProp<ViewStyle>;

  /**
   * 自定义标题样式
   */
  titleStyle?: StyleProp<TextStyle>;

  /**
   * 自定义子标题样式
   */
  subtitleStyle?: StyleProp<TextStyle>;

  /**
   * 自定义取消按钮样式
   */
  cancelButtonStyle?: StyleProp<ViewStyle>;

  /**
   * 自定义取消按钮文本样式
   */
  cancelTextStyle?: StyleProp<TextStyle>;

  /**
   * 显示时的动画持续时间，单位为毫秒，默认为300
   */
  animationDuration?: number;

  /**
   * 遮罩背景颜色，默认半透明黑色
   */
  backdropColor?: string;

  /**
   * 面板圆角大小，默认为10
   */
  borderRadius?: number;

  /**
   * 是否隐藏取消按钮
   */
  hideCancel?: boolean;

  /**
   * 是否在标题栏左侧显示多选按钮
   */
  showMultiSelect?: boolean;

  /**
   * 多选按钮的文本，默认为"多选"
   */
  multiSelectText?: string;

  /**
   * 点击多选按钮的回调函数
   */
  onMultiSelect?: () => void;

  /**
   * 多选按钮样式
   */
  multiSelectStyle?: StyleProp<TextStyle>;

  /**
   * 是否在标题栏右侧显示取消按钮
   */
  showTitleCancel?: boolean;

  /**
   * 标题栏取消按钮的文本，默认为"取消"
   */
  titleCancelText?: string;

  /**
   * 点击标题栏取消按钮的回调函数
   */
  onTitleCancel?: () => void;

  /**
   * 标题栏取消按钮样式
   */
  titleCancelStyle?: StyleProp<TextStyle>;
}
